<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>学生信息管理</title>
  <style>
    * {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: red underline;
  color: #721c24;
}

h1 {
  text-align: center;
  color: #333;
  margin: 20px;
  font-size: 30px;
}

table {
  margin: 0 auto;
  width: 800px;
  border-collapse: collapse;
  color: #004085;
}

th {
  padding: 10px;
  background-color: #cfe5ff;
  font-size: 20px;
  font-weight: 500;
}

td,th {
  border: 1px solid #b8daff;
}

td {
  padding: 10px;
  color: #2c27cd;
  text-align: center;
  font-size: 16px;
}

tbody tr {
  background: #e1ecf8;
}

.info {
  width: 900px;
  margin: 20px auto;
  text-align: center;
}

.info input,
.info select {
  width: 80px;
  height: 27px;
  outline: none;
  border-radius: 5px;
  border: 1px solid #b8daff;
  padding-left: 5px;
  box-sizing: border-box;
  margin-right: 15px;
}

.info button {
  width: 60px;
  height: 27px;
  background-color: #96bee9;
  outline: none;
  border: 0;
  cursor: pointer;
  border-radius: 5px;
}

.info .age {
  width: 50px;
}
  </style>
</head>

<body>
  <h1>新增学生信息</h1>
  <form class="info" autocomplete="off">
    姓名：<input type="text" class="uname" name="uname" />
    年龄：<input type="text" class="age" name="age" />

    性别：<select name="gender" class="gender">
      <option value="男">男</option>
      <option value="女">女</option>
    </select>
    薪资：<input type="text" class="salary" name="salary" />
    就业城市：<select name="city" class="city">
      <option value="北京">北京</option>
      <option value="上海">上海</option>
      <option value="广州">广州</option>
      <option value="深圳">深圳</option>
      <option value="赣州">赣州</option>
    </select>
    <button class="add">录入</button>
  </form>
  <h1>就业榜</h1>
  <table>
    <caption>数据：<span class="sj"></span></caption>
    <thead>
      <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>薪资</th>
        <th>就业城市</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <!-- <tr>
        <td>1001</td>
        <td>欧阳霸天</td>
        <td>19</td>
        <td>男</td>
        <td>15000</td>
        <td>上海</td>
        <td><a href="javascript:">删除</a></td>
      </tr> -->
    </tbody>
  </table>
  <script>
      // const initDte = [
      //    {
      //    stuId: 1001,
      //    uname: '欧阳霸天',
      //    age: 19,
      //    gender: '男',
      //    salary: '20000',
      //    city: '上海',
      //  }
      // ]
      const arr = JSON.parse(localStorage.getItem('stu')) || []
      const tbody = document.querySelector('tbody')
      const sj = document.querySelector('.sj')
      const form = document.querySelector('form')
      const uname = document.querySelector('.uname')
      const age = document.querySelector('.age')
      const gender = document.querySelector('.gender')
      const salary = document.querySelector('.salary')
      const city = document.querySelector('.city')
      const items = document.querySelectorAll('[name]')
      function fn(){
        const trArr = arr.map(function(item , index){
          return`
          <td>${item.stuId}</td>
          <td>${item.uname}</td>
          <td>${item.age}</td>
          <td>${item.gender}</td>
          <td>${item.salary}</td>
          <td>${item.city}</td>
          <td>
            <a href="javascript:" data-id = '${index}'>删除</a>
          </td>
        </tr>
          
          `
        })
        tbody.innerHTML = trArr.join('')
        sj.innerHTML = arr.length
      }
      //加载页面时先渲染一次
      fn()
      
      form.addEventListener('submit', function (e){
      e.preventDefault()
      for (let j = 0; j < items.length; j++) {
        if (items[j].value === '') {
          return alert('内容不能为空')
        }
      }
         const obj = {
         
        stuId: arr.length + 1,
        uname: uname.value,
        age: age.value,
        gender: gender.value,
        salary: salary.value,
        city: city.value
      }
      arr.push(obj)
      //重置表单
      form.reset()
      //根据新数据重新渲染
      fn()
      //把增加后的最新数据存进本地存储
      localStorage.setItem('stu', JSON.stringify(arr))
      })
      //删除模块
    tbody.addEventListener('click', function (e) {
      if (e.target.tagName === 'A') {
        // console.log(e.target.dataset.id)  
        if (confirm('确定删除吗？')) {
          arr.splice(e.target.dataset.id, 1) //删除跟数据索引保持一致
          // 重新排序stuId
          arr.forEach(function (item, index) {
            item.stuId = index + 1
          })
          localStorage.setItem('stu', JSON.stringify(arr)) //把删除后的最新数据存放本地存储
          fn() //重新渲染
        }
      }
    })
  </script>

</body>

</html>